<template>
  <div class="Onlinepreview">
    <section class="toolTop">
      <el-form :inline="true" class="demo-form-inline">
        <el-row :gutter="18">
          <el-col :span="18">
            <el-form-item class="addBtn">
              <el-button icon="el-icon-plus" @click="selectDeviceClick">选 择 设 备</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <section class="mainTop">
      <div class="reply_programe" v-for="(item,index) in reply" :key="index">
        <video-player
          class="vjs-custom-skin"
          ref="videoPlayer"
          @ready="onPlayerReadied"
          :options="playerOptions[index]"
          :playsinline="true"
        ></video-player>
      </div>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/devicemg/subonlinedevice/onlinepreview.js"></script>

<style lang="scss">
.Onlinepreview {
  width: 100%;
  margin-top: -2%;
  > section {
    &.toolTop {
      width: 50%;
      display: flex;
      flex-direction: column;
      .el-form {
        .el-form-item__content {
          display: flex;
          margin-top: -36%;
        }
      }
      .el-button {
        background-color: #161836;
        color: #85899c;
        border: 1px solid #85899c;
        height: 30px;
        padding: 7px 20px;
      }
      .el-button:hover,
      .el-button:focus {
        background-color: #161836;
        height: 30px;
        padding: 7px 20px;
        color: #fff;
        border: 1px solid #fff;
      }
    }
    &.mainTop {
      .reply_programe {
        width: 100%;
        .video-player {
          .video-js {
            margin-top: 1%;
            margin-left: 4%;
            width: 29%;
            padding-top: 15%;
            float: left;
            flex-flow: wrap;
            background-color: #161836;
            display: flex;
            .vjs-control-bar {
              width: 89%;
            }
          }
          .vjs-tech {
            width: 89%;
          }

          .vjs-modal-dialog {
            width: 90%;
          }

          .vjs-modal-dialog-content {
            width: 90%;
          }

          .vjs-poster {
            background-position: 0% 0%;
            height: 100%;
            width: 90%;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>